<template>
  <div class="row-main">
    <el-tabs v-model="activeName" type="card" style="margin-top: 30px;width:100%;">
      <el-tab-pane label="待审核" name="first">
        <el-table
          :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
          :data="tableData1"
          ref="table"
          tooltip-effect="dark"
          class="row-main-table"
          v-loading.fullscreen="tableLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          @sort-change="changeSort1"
        >
          <el-table-column
            sortable='custom'
            prop="flowId"
            label="流程号"
            :width="$store.state.app.screenWidth<992?'130px':'auto'"
            :fixed="$store.state.app.screenWidth<992?true:false"
            align="center">
          </el-table-column>
          <el-table-column
            prop="cardNumberStart"
            label="起始业务号码"
            :width="$store.state.app.screenWidth<992?'180px':auto"
            align="center"/>
          <el-table-column
            prop="cardNumberEnd"
            label="结束业务号码"
            :width="$store.state.app.screenWidth<992?'180px':auto"
            align="center"/>
          <el-table-column
            prop="dictFlowTypeName"
            label="流程类型"
            :width="$store.state.app.screenWidth<992?'130px':'auto'"
            align="center"/>
          <el-table-column
            prop="dictExamineStatusName"
            label="流程审核状态"
            :width="$store.state.app.screenWidth<992?'130px':'auto'"
            align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.dictExamineStatus=='C_REFUSE'" style="color:red">{{
                  scope.row.dictExamineStatusName
                }}</span>
              <span v-if="scope.row.dictExamineStatus=='C_THROUGH'"
                    style="color: #409EFF">{{ scope.row.dictExamineStatusName }}</span>
              <span v-if="scope.row.dictExamineStatus=='C_WAIT'"
                    style="color: #1616ff">{{ scope.row.dictExamineStatusName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="reason"
            label="原因"
            :width="$store.state.app.screenWidth<992?'180px':auto"
            align="center"/>
          <el-table-column
            prop="insertTimeDate"
            label="发起时间"
            :width="$store.state.app.screenWidth<992?'180px':auto"
            align="center"/>
          <el-table-column
            label="操作"
            align="center">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <div class="el-dropdown-link">
                  <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button class="operation" style="width: 100%;"
                               :disabled="scope.row.dictExamineStatus !== 'C_WAIT'" @click="examine(scope.row)">审核
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button class="operation" style="width: 100%;" @click="cardInfo(scope.row.id)">查看卡板</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page.sync="currentPage1"
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper"
            :page-count='maxPage1'
            :total="totalPage1"
            :page-sizes="[10,20,50,100]"
            background
            class="row-main-pager"></el-pagination>
        </div>
        <!--审核弹框-->
        <el-dialog
          class="delete"
          top="33vh"
          :visible.sync="examineDialog"
          :width="$store.state.app.screenWidth<500?'100%':'500px'"
          :append-to-body="true">
          <el-form :model="form1" :rules="rules" label-width="100px" :label-position="$store.state.app.screenWidth<500?'top':'right'">
            <el-form-item label="审核意见">
              <el-radio-group v-model="form1.dictExamineStatus" size="medium">
                <el-radio border label="C_THROUGH">通过</el-radio>
                <el-radio border label="C_REFUSE">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="原因">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form1.reason">
              </el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 0;margin-top: 10px;margin-left: 68%">
              <el-button size="small" @click="examineDialog = false">取 消</el-button>
              <el-button size="small" type="primary" v-preventReClick @click="isExamine()">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog
          class="delete"
          top="33vh"
          :visible.sync="isExamineDialog"
          :width="$store.state.app.screenWidth<500?'100%':'500px'"
          :append-to-body="true">
          <span style="display: flex; justify-content: center;">确定{{ msg }}吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="isExamineDialog = false">取 消</el-button>
            <el-button size="small" type="primary" @click="examineSave" v-preventReClick>确 定</el-button>
          </span>
        </el-dialog>

      </el-tab-pane>
      <el-tab-pane label="我发起" name="second">
        <el-header style="margin-top: 30px">
          <el-button type="primary" size="small" @click="toProcess">卡板回收申请</el-button>
        </el-header>
        <el-main style="padding-top:0">
          <el-table
            :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
            :data="tableData"
            ref="table"
            tooltip-effect="dark"
            class="row-main-table"
            v-loading.fullscreen="tableLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            @sort-change="changeSort"
          >
            <el-table-column
              sortable='custom'
              prop="flowId"
              label="流程号"
              :fixed="$store.state.app.screenWidth<992?true:false"
              :width="$store.state.app.screenWidth<992?'130px':'auto'"
              align="center">
            </el-table-column>
            <el-table-column
              prop="cardNumberStart"
              label="起始业务号码"
              :width="$store.state.app.screenWidth<992?'130px':'auto'"
              align="center"/>
            <el-table-column
              prop="cardNumberEnd"
              label="结束业务号码"
              :width="$store.state.app.screenWidth<992?'130px':'auto'"
              align="center"/>
            <el-table-column
              prop="dictFlowTypeName"
              label="流程类型"
              :width="$store.state.app.screenWidth<992?'130px':'auto'"
              align="center"/>
            <el-table-column
              prop="dictFlowStatusName"
              label="流程状态"
              :width="$store.state.app.screenWidth<992?'130px':'auto'"
              align="center">
              <template slot-scope="scope" style="color: red">
                <span v-if="scope.row.dictFlowStatus=='TASK_PENDING'" style="color:red">{{ scope.row.dictFlowStatusName }}</span>
                <span v-if="scope.row.dictFlowStatus=='TASK_COMPLETED'" style="color: #409EFF">{{ scope.row.dictFlowStatusName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="reason"
              label="原因"
              :width="$store.state.app.screenWidth<992?'130px':'auto'"
              align="center"/>
            <el-table-column
              prop="insertTimeDate"
              label="发起时间"
              :width="$store.state.app.screenWidth<992?'130px':'auto'"
              align="center"/>
          </el-table>

          <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-count='maxPage'
              :total="totalPage"
              :page-sizes="[10,20,50,100]"
              class="row-main-pager"
              background></el-pagination>
          </div>
          <!--发起退卡申请弹框-->
          <el-dialog
            class="delete"
            top="33vh"
            :visible.sync="processDialog"
            :append-to-body="true"
            :width="$store.state.app.screenWidth<500?'100%':'500px'"
            label-width="80px">
            <el-form :model="form" :rules="rules" class="disabledDialog" :label-position="$store.state.app.screenWidth<500?'top':'right'">
              <el-form-item label="号段区间" >
                <div style="width: 100%;display: flex;justify-content: space-between;align-items: center">
                  <el-input v-model.trim="form.cardNumberStart" placeholder="开始号段" style="width: 47%"></el-input>
                  <span>-</span>
                  <el-input size="small" v-model.trim="form.cardNumberEnd" placeholder="结束号段"  style="width: 47%"></el-input>
                </div>

              </el-form-item>
              <el-form-item label="回收原因">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="form.reason">
                </el-input>
              </el-form-item>
              <el-form-item style="text-align: right">
                <el-button size="small" @click="processDialog = false">取 消</el-button>
                <el-button size="small" type="primary" v-preventReClick @click="process()">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          <el-dialog
            class="delete"
            top="33vh"
            :visible.sync="isProcessDialog"
            :width="$store.state.app.screenWidth<500?'100%':'500px'"
            :append-to-body="true">
            <span style="display: flex; justify-content: center;">确定发起回收卡申请吗？</span>
            <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="isProcessDialog = false">取 消</el-button>
            <el-button size="small" type="primary" v-preventReClick @click="processSave">确 定</el-button>
          </span>
          </el-dialog>

        </el-main>
      </el-tab-pane>
    </el-tabs>
    <el-dialog class="delete" top="13vh" :visible.sync="stockOutDialog1" :append-to-body="true" :width="$store.state.app.screenWidth<500?'100%':'500px'">
      <span style="display: flex; justify-content: center;" prop="num">
        <el-table
          :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
          :data="cardList"
          ref="table"
          tooltip-effect="dark"
          style="width: 100%"
          height="500"
          @sort-change="changeSort"
        >
        <el-table-column
          sortable='custom'
          prop="card"
          label="卡号"
          align="center">
        </el-table-column>
      </el-table>
      </span>
      <span class="dialog-footer" slot="footer">
        <el-button @click="stockOutDialog1 = false" size="small" :loading="okloading">取 消</el-button>
        <el-button type="primary" @click="stockOutDialog1 = false" size="small" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
  </div>


</template>

<script>
import {mapGetters} from 'vuex'
import {
  checkCards,
  inboundList, settingCardRealNameStatus, processSave, processListForAgent, processListForAgentStart, examineFlowAgent

} from '@/api/getData'

export default {
  name: 'Home',
  data() {
    return {
      cardList: [],
      okloading: false,
      stockOutDialog1: false,
      cardListLoading: false,
      activeName: 'first',
      dictLastAgentFlag: '',
      flowId: '',
      msg: '',
      examineDialog: false,
      isExamineDialog: false,
      form: {
        cardNumberStart: '',
        cardNumberEnd: '',
        reason: ''
      },
      value: 'simple',
      form1: {
        dictExamineStatus: 'C_THROUGH',
        reason: ''
      },
      rules: {
        cardNumberStart: [
          {required: true, message: '请输入开始号段', trigger: 'blur'},
        ],
        cardNumberEnd: [
          {required: true, message: '请输入结束号段', trigger: 'blur'},
        ],
      },
      isProcessDialog: false,
      startCardNumber: '',
      endCardNumber: '',
      dialogVisible: false,
      processDialog: false,
      dialogVisible3: false,
      textarea1: '',
      radio2: '1',
      maxPage: 1,
      totalPage: 0,
      maxPage1: 1,
      totalPage1: 0,
      tableData: [],
      tableData1: [],
      tableLoading: false,
      ascs: [],
      descs: [],
      ascs1: [],
      descs1: [],
      pageSize: 10,
      currentPage: 1,
      pageSize1: 10,
      currentPage1: 1,
      id: '',
      insertTime: '',
      pid: '',
      dictDisabledCardStatus: '',
      dictDisabledCardStatusName: '',
      startCardNum: '',
      endCardNum: '',
      oprationEmp: '',
      oprationEmpName: '',
      dictOprationType: '',
      ruleTypeId: '',
      reason: '',
      oemId: '',
      startTime: '',
      endTime: '',
      ruleName: '',
      input: '',
      dictDisabledRuleType: '',
      dialogVisible1: false,
      value1: '',
      value2: '',
      pagekey: '',
    }
  },

  created() {
    this.processListForAgent()
    this.processListForAgentStart()
  },
  methods: {
    // 卡详情
    async cardInfo(id) {
      // this.cardListLoading = true
      const returnData = await checkCards({
        id: id
      })
      if (returnData._result) {
        returnData.data.map(item => {
          let data = {
            card: item
          }
          this.cardList.push(data)
          this.stockOutDialog1 = true
        })
      }
      this.cardListLoading = false
    },
    async isExamine() {
      this.isExamineDialog = true;
      this.pagekey = await this.$getPageKey();

      if (this.form1.dictExamineStatus == 'C_THROUGH') {
        this.msg = '通过审核'
      }
      if (this.form1.dictExamineStatus == 'C_REFUSE') {
        this.msg = '拒绝审核'
      }
    },
    async processSave() {
      this.processDialog = false;
      this.isProcessDialog = false;
      let s = await processSave({
        cardNumberStart: this.form.cardNumberStart,
        cardNumberEnd: this.form.cardNumberEnd,
        reason: this.form.reason,
      }, {pagekey: this.pagekey});
      if (s._result) {
        this.$message.success("操作成功！")
        this.processListForAgent()
        this.processListForAgentStart()
      }
      this.pagekey = await this.$getPageKey();
    },
    async toProcess() {
      this.processDialog = true;
      this.form.cardNumberEnd = '';
      this.form.cardNumberStart = '';
      this.form.reason = '';
      this.pagekey = await this.$getPageKey();
    },

    //审核
    examine(examineFlow) {
      this.id = examineFlow.id;
      this.flowId = examineFlow.flowId;
      this.dictLastAgentFlag = examineFlow.dictLastAgentFlag;
      this.examineDialog = true;
    },
    async examineSave() {
      this.isExamineDialog = false;
      this.examineDialog = false;
      // if(this.form1.dictLastAgentFlag=='C_YES'){
      //     this.dictExamineStatus = 'C_THROUGH'
      // }
      // if(this.form1.dictLastAgentFlag=='C_NO'){
      //     this.dictExamineStatus = 'C_REFUSE'
      // }
      let s = await examineFlowAgent({
        id: this.id,
        flowId: this.flowId,
        dictLastAgentFlag: this.dictLastAgentFlag,
        dictExamineStatus: this.form1.dictExamineStatus,
        reason: this.form1.reason,
      }, {pagekey: this.pagekey});

      if (s._result) {
        this.$message.success("操作成功！")
        this.processListForAgent()
      }
    },
    async process() {

      if (this.form.cardNumberStart == "" || this.form.cardNumberEnd == "") {
        this.$message({
          message: '请填写号段',
          type: 'warning'
        });
      } else {
        if (parseInt(this.form.cardNumberEnd) < parseInt(this.form.cardNumberStart)) {
          this.$message({
            message: '结束号段必须大于或等于开始号段',
            type: 'warning'
          });
        } else {
          // this.addDisabledDialog = false
          this.isProcessDialog = true
        }
      }
    },

    changeSort(column) {
      //console.log(column);
      if (column.order == 'ascending') {
        this.descs = []
        this.ascs = [column.prop];
      } else {
        this.ascs = []
        this.descs = [column.prop];
      }
      this.processListForAgentStart();
    },
    changeSort1(column) {
      //console.log(column);
      if (column.order == 'ascending') {
        this.descs1 = []
        this.ascs1 = [column.prop];
      } else {
        this.ascs1 = []
        this.descs1 = [column.prop];
      }
      this.processListForAgent();
    },

    handleSelectionChange(val) {
      this.tableChecked = val
      const length = this.tableChecked.length
      //console.log(`共 ${length} 条`)
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.processListForAgentStart()
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`)
      this.currentPage = val
      this.processListForAgentStart()
    },

    handleSizeChange1(val) {
      //console.log(`每页 ${val} 条`)
      this.pageSize1 = val
      this.processListForAgent()
    },
    handleCurrentChange1(val) {
      //console.log(`当前页: ${val}`)
      this.currentPage1 = val
      this.processListForAgent()
    },

    // 发起列表
    async processListForAgentStart() {
      const returnData = await processListForAgentStart({
          page: {
            current: this.currentPage + '',
            size: this.pageSize + '',
            ascs: this.ascs,
            descs: this.descs
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        })
      this.tableData = []
      if (returnData._result) {
        this.tableLoading = false
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
        this.totalPage = returnData.data.total;
        // 数据回显
        returnData.data.records.map(item => {
          const obj = {}
          obj.children = item.children
          obj.reason = item.reason
          obj.page = item.page
          obj.oemId = item.oemId
          obj.cardNumberEnd = item.cardNumberEnd
          obj.cardNumberStart = item.cardNumberStart
          obj.dictFlowTypeName = item.dictFlowTypeName
          obj.dictFlowType = item.dictFlowType
          obj.remark = item.remark
          obj.flowId = item.flowId
          obj.dictFlowStatusName = item.dictFlowStatusName
          obj.dictFlowStatus = item.dictFlowStatus
          obj.userId = item.userId
          obj.dictLastAgentFlagName = item.dictLastAgentFlagName
          obj.dictLastAgentFlag = item.dictLastAgentFlag
          obj.dictExamineStatusName = item.dictExamineStatusName
          obj.dictExamineStatus = item.dictExamineStatus
          obj.superiorDictExamineStatus = item.superiorDictExamineStatus
          obj.pId = item.pId
          obj.id = item.id
          obj.insertTimeDate = item.insertTimeDate
          obj.insertTime = item.insertTime
          obj.insertTimeTime = item.insertTimeTime
          this.tableData.push(obj)
        })
        this.tableLoading = false
      }
    },
    // 待审核列表
    async processListForAgent() {
      const returnData = await processListForAgent({
          page: {
            current: this.currentPage1 + '',
            size: this.pageSize1 + '',
            ascs: this.ascs1,
            descs: this.descs1
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        })
      this.tableData1 = []
      if (returnData._result) {
        this.tableLoading = false
        this.maxPage1 = Math.ceil(returnData.data.total / this.pageSize1) // 分页的最大页数
        this.totalPage1 = returnData.data.total;
        // 数据回显
        returnData.data.records.map(item => {
          const obj = {}
          obj.children = item.children
          obj.reason = item.reason
          obj.page = item.page
          obj.oemId = item.oemId
          obj.cardNumberEnd = item.cardNumberEnd
          obj.cardNumberStart = item.cardNumberStart
          obj.dictFlowTypeName = item.dictFlowTypeName
          obj.dictFlowType = item.dictFlowType
          obj.remark = item.remark
          obj.flowId = item.flowId
          obj.dictFlowStatusName = item.dictFlowStatusName
          obj.dictFlowStatus = item.dictFlowStatus
          obj.userId = item.userId
          obj.dictLastAgentFlagName = item.dictLastAgentFlagName
          obj.dictLastAgentFlag = item.dictLastAgentFlag
          obj.dictExamineStatusName = item.dictExamineStatusName
          obj.dictExamineStatus = item.dictExamineStatus
          obj.superiorDictExamineStatus = item.superiorDictExamineStatus
          obj.pId = item.pId
          obj.id = item.id
          obj.insertTimeDate = item.insertTimeDate
          obj.insertTime = item.insertTime
          obj.insertTimeTime = item.insertTimeTime
          this.tableData1.push(obj)
        })
        this.tableLoading = false
      }
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.disabledList-title {
  font-weight: bold;
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
}

.disabledList-tableTitle {
  font-weight: bold;
  color: #606266;
}

.block {
  text-align: right;
}

.el-dropdown-link {
  font-size: 20px;
  cursor: pointer;
}

.el-popper[x-placement^=bottom] {
  margin-right: -26px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 5px;

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
</style>
